<template>
  <van-tabs v-model:active="select1" background="#222" @click="click(listUrl[select1 - 1])"    title-inactive-color="#999" title-active-color="#fff">
    <van-tab v-for="(item,index) in calssify"  :title-class="calssify.length<=5&&index === 0?'more':''" :disabled="index === 0" :key="index" :title="item">
    </van-tab>
  </van-tabs>
  <van-tabs v-model:active="select2" background="#222"  @click="click(listUrl[calssify.length + select2 - 2])"  title-inactive-color="#999" title-active-color="#fff">
    <van-tab v-for="(item,index) in mold" :title-class="mold.length<=5&&index === 0?'more':''"   :disabled="index === 0" :key="index" :title="item">
    </van-tab>
  </van-tabs>
  <van-tabs v-model:active="select3" background="#222"  @click="click(listUrl[calssify.length + mold.length  + select3 - 3])"  title-inactive-color="#999" title-active-color="#fff">
    <van-tab v-for="(item,index) in time" :title-class="time.length<=5&&index === 0?'more':''"   :disabled="index === 0" :key="index" :title="item">
    </van-tab>
  </van-tabs>
  <van-tabs v-model:active="select4" background="#222" @click="click(listUrl[calssify.length + mold.length + time.length  + select4 - 4])"  title-inactive-color="#999" title-active-color="#fff">
    <van-tab v-for="(item,index) in sort" :title-class="sort.length<=5&&index === 0?'more':''"  :disabled="index === 0" :key="index" :title="item">
    </van-tab>
  </van-tabs>
</template>

<script>
import { reactive,toRefs } from '@vue/reactivity'
export default {
    props:{
        listUrl:{
            type:Array,
            default:()=>[]
        },
        calssify:{
            type:Array,
            default:()=>{ return ['分类','全部'] }
        },
    },
    emits:['refesh'],
    setup(props,context){
        const state = reactive({
            select1:0,
            select2:0,
            select3:0,
            select4:0,
            mold:['类型','全部','大陆','香港','台湾','美国','韩国','日本','泰国','新加坡','马来西亚','印度','英国','法国','加拿大','西班牙','俄罗斯','其它'],
            time:['时间','全部','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008','2007','2006','2005','2004','2003','2002','2001','2000','1999','1998','1997','1996','1995'],
            sort:['排序','时间','人气','评分']
        })
        const click = (e)=>{
            context.emit('refesh',e)
        }
        return{
            ...toRefs(state),
            click
        }
    }
}
</script>

<style lang="less">
.van-tabs{
    display: flex;
    .van-tab{
        width: 60px;   
        margin: 0 0 10px 0px;
        font-size: 14px;
        padding: 0;
        .van-tab__text{
            width: 100%;
            display: inline-block;
            text-align: center;
        }
    }
    .more{
        margin-left: 7px;
    }
    .van-tabs__line{
        display: none;
    }
    .van-tab--active{
        background: #333;
        border-radius: 20px;
       
    }
}

</style>